<template>
  <div class="my">
    <div class="my-bg">
      <div class="setting">
        <img @click="toSet" src="https://image-mall.gxptkc.com/m/resources/member/setting_icon.png" alt="" />
        <img src="https://image-mall.gxptkc.com/m/resources/member/msg_icon.png" alt="" />
      </div>
      <div class="my-msg">
        <div class="login">
          <div class="img">
            <img v-if="!info" src="https://image-mall.gxptkc.com/m/resources/default/member-avatar.png" alt="" />
            <img :src="info?.memberAvatar" alt="" v-else />
          </div>
          <span @click="$router.push('/login')" v-if="!info">登录</span>
          <div class="info" @click="$router.push('/person')" v-if="info">
            <p>{{ info?.memberNickName }}</p>
            <p>会员名:{{ info?.memberName }}</p>
          </div>
        </div>
        <div class="msg"></div>
      </div>
      <div class="my-action">
        <ul class="list">
          <li @click="toMyFollow">
            <img src="https://image-mall.gxptkc.com/m/resources/member/mine_stores.png" alt="" />
            <span>关注店铺</span>
          </li>
          <li @click="toCollection">
            <img src="	https://image-mall.gxptkc.com/m/resources/member/mine_collection.png" alt="" />
            <span>我的收藏</span>
          </li>
          <li @click="toMyFootprict">
            <img src="https://image-mall.gxptkc.com/m/resources/member/mine_footprint.png" alt="" />
            <span>我的足迹</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="my-order">
      <div class="all-order">
        <span>我的订单</span>
        <div class="order">
          <span @click="toOrder('全部订单')">全部订单</span>
          <img src="https://image-mall.gxptkc.com/m/resources/member/right_down.png" alt="" />
        </div>
      </div>
      <div class="order-action">
        <ul class="list">
          <li @click="toOrder('待付款')">
            <img src="https://image-mall.gxptkc.com/m/resources/member/wait_pay_icon.png" alt="" />
            <span>待付款</span>
          </li>
          <li @click="toOrder('待发货')">
            <img src="https://image-mall.gxptkc.com/m/resources/member/wait_deliver_icon.png" alt="" />
            <span>待发货</span>
          </li>
          <li @click="toOrder('待收货')">
            <img src="	https://image-mall.gxptkc.com/m/resources/member/wait_receive_icon.png" alt="" />
            <span>待收货</span>
          </li>
          <li @click="toOrder('待评价')">
            <img src="	https://image-mall.gxptkc.com/m/resources/member/wait_evaluate_icon.png" alt="" />
            <span>待评价</span>
          </li>
          <li @click="toOrder('售后')">
            <img src="https://image-mall.gxptkc.com/m/resources/member/wait_service_icon.png" alt="" />
            <span>退款/售后</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="my-service">
      <p>常用服务</p>
      <div class="coupon">
        <div class="left">
          <img src="https://image-mall.gxptkc.com/m/resources/member/my_coupon.png" alt="" />
          <span>我的优惠券</span>
        </div>
        <div class="right">
          <img src="https://image-mall.gxptkc.com/m/resources/member/right_down.png" alt="" />
        </div>
      </div>
    </div>
    <div class="recomment-list">
      <RecommentGoods />
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { mapMutations } from "vuex";
Vue.use(Toast);
import RecommentGoods from "@/components/RecommentGoods.vue";
export default {
  data() {
    return {
      info: null,
      token: "",
      isLogin: null,
    };
  },
  components: { RecommentGoods },
  async created() {
    //登录后的操作
    this.token = localStorage.getItem("fastCar-token");
    let infoRes = await this.axios({
      method: "GET",
      url: "https://m-mall.gxptkc.com/v3/member/front/member/memberInfo",
      headers: {
        authorization: `Bearer ${this.token}`,
      },
    });
    this.isLogin = infoRes.data;
    this.info = infoRes?.data?.data;
  },
  methods: {
    ...mapMutations(["changeOrderType"]),
    toOrder(type) {
      if (this.isLogin.msg == "成功") {
        if (type == "待付款") {
          this.changeOrderType("waitPay");
        } else if (type == "待发货") {
          this.changeOrderType("waitSend");
        } else if (type == "待收货") {
          this.changeOrderType("waitReceipt");
        } else if (type == "待评价") {
          this.changeOrderType("waitEvaluate");
        } else if (type == "售后") {
          this.changeOrderType("afterSales");
        } else if (type == "全部订单") {
          this.changeOrderType("");
        }

        this.$router.push("/order");
      } else {
        Toast(this.isLogin.msg);
      }
    },
    toSet() {
      if (this.isLogin.msg == "成功") {
        this.$router.push("/set");
      } else {
        Toast(this.isLogin.msg);
      }
    },
    toMyFollow() {
      if (this.isLogin.msg == "成功") {
        this.$router.push("/myself/follow");
      } else {
        Toast(this.isLogin.msg);
      }
    },
    toCollection() {
      if (this.isLogin.msg == "成功") {
        this.$router.push("/myself/collection");
      } else {
        Toast(this.isLogin.msg);
      }
    },
    toMyFootprict() {
      if (this.isLogin.msg == "成功") {
        this.$router.push("/myself/foot");
      } else {
        Toast(this.isLogin.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$color: rgb(245, 245, 245);

.my {
  background-color: $color;

  .my-bg {
    background-image: url("https://image-mall.gxptkc.com/m/resources/member/member_bg.png");
    background-size: cover;
    padding: 15rem 15rem 60rem;
    position: relative;

    .setting {
      // display: flex;
      // justify-content: right;
      width: 100%;
      text-align: right;

      img {
        width: 25rem;
        height: 25rem;
        margin-left: 10rem;
      }
    }

    .my-msg {
      .login {
        display: flex;
        justify-content: left;
        align-items: center;

        .img {
          width: 60rem;
          height: 60rem;
          background-color: rgb(255, 170, 148);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 5rem;

          img {
            width: 50rem;
          }
        }

        span {
          font-size: 20rem;
          color: #fff;
          font-weight: bold;
          margin-left: 10rem;
        }

        .info {
          p {
            color: #fff;

            &:first-child {
              font-size: 20rem;
              margin-bottom: 5rem;
            }
          }
        }
      }
    }

    .my-action {
      background-color: #fff;
      border-radius: 10rem;
      position: absolute;
      bottom: -40rem;
      left: 10rem;
      width: calc(100vw - 20rem);

      ul.list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rem 30rem;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 22rem;
            height: 22rem;
          }

          span {
            font-size: 13rem;
            color: #666;
            margin-top: 15rem;
          }
        }
      }
    }
  }

  .my-order {
    background-color: #fff;
    margin: 50rem 10rem 0;
    padding: 0 10rem;
    border-radius: 10rem;

    .all-order {
      padding: 10rem;
      border-bottom: 1px solid $color;
      display: flex;
      justify-content: space-between;
      align-items: center;

      >span {
        font-size: 17rem;
        color: #2d2d2d;
        font-weight: bold;
      }

      .order {
        span {
          font-size: 14rem;
          color: #666;
          margin-right: 8rem;
        }

        img {
          width: 5rem;
        }
      }
    }

    .order-action {
      padding: 20rem 0;

      ul.list {
        display: flex;
        justify-content: space-between;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            width: 33rem;
          }

          span {
            font-size: 14rem;
            color: #333;
            margin-top: 10rem;
          }
        }
      }
    }
  }

  .my-service {
    background-color: #fff;
    margin: 10rem;
    border-radius: 10rem;

    p {
      font-size: 17rem;
      color: #2d2d2d;
      font-weight: bold;
      padding: 14rem;
      border-bottom: 1px solid $color;
    }

    .coupon {
      padding: 20rem 14rem;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        img {
          width: 25rem;
          margin-right: 10rem;
        }

        span {
          font-size: 14rem;
          color: #2d2d2d;
        }
      }

      .right {
        width: 5rem;
      }
    }
  }

  .recomment-list {
    .title {
      text-align: center;

      img {
        width: 193rem;
        margin: 10rem 0;
      }
    }
  }

  .bottom {
    width: 100vw;
    height: 55rem;
  }
}
</style>